<template>
  <!-- :load -> 懒加载当前节点的子节点，两个参数是当前节点node, 和子节点的回调solved -->
  <!-- :props -> 懒加载节点的属性，默认为 { label: 'label', children: 'children', isLeaf: 'isLeaf' } -->
  <!-- :cache-data -> 缓存懒加载的节点数据，用于解决懒加载时，子节点数据不变，但是父节点数据变化时，子节点数据不变的问题 -->
  <el-tree-select
    v-model="value"
    lazy
    :load="load"
    :props="props"
    style="width: 240px"
  />
  <el-divider />
  <el-tree-select
    v-model="value2"
    lazy
    :load="load"
    :props="props"
    :cache-data="cacheData"
    style="width: 240px"
  />
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const value = ref()
const value2 = ref(5)

const cacheData = [{ value: 5, label: 'lazy load node5' }]

const props = {
  label: 'label',
  children: 'children',
  isLeaf: 'isLeaf',
}

let id = 0

/**
 * 懒加载节点数据的方法
 * @param node 当前节点对象
 * @param resolve 用于返回子节点数据的回调函数
 */
const load = (node, resolve) => {
  // 如果当前节点标记为叶子节点，则返回空数组表示没有子节点
  if (node.isLeaf) return resolve([])

  // 使用 setTimeout 模拟异步请求延迟加载数据
  setTimeout(() => {
    // 返回两个模拟的子节点数据
    resolve([
      {
        // 节点值，通过自增 id 生成唯一标识
        value: ++id,
        // 节点显示标签
        label: `lazy load node${id}`,
      },
      {
        value: ++id,
        label: `lazy load node${id}`,
        // 标记此节点为叶子节点，不再触发懒加载
        isLeaf: true,
      },
    ])
  }, 400) // 延迟 400 毫秒模拟网络请求
}
</script>
